<template>
  <div class="footer">
    <div class="top">
      <span class="iconfont">&#xe60f;</span>票面价是指通过景区指定窗口售卖的纸质门票上标注的价格
    </div>
    <div class="middle">
      <ul class="middle-content">
        <li class="middle-item">
          <span class="iconfont">&#xe603;</span>
          <a href>机票</a>
        </li>
        <li class="middle-item">
          <span class="iconfont">&#xe710;</span>
          <a href>酒店</a>
        </li>
        <li class="middle-item">
          <span class="iconfont">&#xe656;</span>
          <a href>公寓</a>
        </li>
        <li class="middle-item">
          <span class="iconfont">&#xe629;</span>
          <a href>更多</a>
        </li>
      </ul>
    </div>
    <div class="down">
      <ul class="down-content">
        <li class="down-item down-item-spe">
          <a href>登录</a>
        </li>
        <li class="down-item">
          <a href>我的订单</a>
        </li>
        <li class="down-item">
          <a href>最近浏览</a>
        </li>
        <li class="down-item">
          <a href>关于我们</a>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <ul class="bottom-content">
        <li>
          <a href>触屏版</a>
        </li>
        <li>
          <a href class="active">电脑版</a>
        </li>
      </ul>
      <p>Qunar 京ICP备05021087意见反馈</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeFooter"
};
</script>

<style lang="stylus" scoped>
.top {
  width: 100%;
  padding: 0.2rem 0 0.2rem 0.4rem;
  background-color: #ffffff;
  margin-top: 0.1rem;
  font-size: 0.1rem;
}

.middle {
  padding: 0.2rem 1rem;
  overflow: hidden;
}

.middle-item {
  float: left;
  width: 25%;
}

.down {
  padding: 0.2rem 1rem;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}

.down-item {
  float: left;
  width: 24%;
}

.down-item a {
  color: #25a4bb;
}

.down-item-spe {
  margin-left: 0.05rem;
}

.bottom-content {
  padding: 0.2rem 2rem;
  margin-left: 0.5rem;
  text-align: center;
  overflow: hidden;
}

.bottom-content li {
  margin-right: 0.3rem;
  float: left;
  width: 30%;
}

.active {
  color: #25a4bb;
}

.bottom p {
  text-align: center;
  padding-bottom: 0.2rem;
}
</style>